Integration av utvecklingsverktyg för JavaScript: Utveckling av VS Code-tillägg

Visual Studio Code (VS Code) har blivit en dominerande kraft i kodredigerarnas värld, älskad av utvecklare över hela världen för sin flexibilitet, sitt rika ekosystem av tillägg och sin robusta funktionsuppsättning. En central del av VS Codes styrka ligger i dess utbyggbarhet, vilket gör det möjligt för utvecklare att skräddarsy IDE:n efter sina specifika behov och arbetsflöden. Den här artikeln ger en omfattande guide till integration av utvecklingsverktyg för JavaScript genom utveckling av VS Code-tillägg, och täcker allt från grunderna till avancerade tekniker.

Varför utveckla VS Code-tillägg för JavaScript?

Att utveckla VS Code-tillägg för JavaScript erbjuder många fördelar som påverkar enskilda utvecklare, team och den bredare JavaScript-gemenskapen.

• Förbättrad produktivitet: Automatisera repetitiva uppgifter, effektivisera arbetsflöden och minska manuellt arbete, vilket frigör utvecklare att fokusera på kärnlogik och kreativ problemlösning.
• Anpassad kodmiljö: Skräddarsy IDE:n efter specifika projektkrav, kodstilar och personliga preferenser, vilket skapar en bekvämare och effektivare utvecklingsupplevelse.
• Förbättrad kodkvalitet: Integrera linters, formaterare och kodanalysverktyg direkt i redigeraren, vilket säkerställer kodkonsistens, identifierar potentiella fel och främjar bästa praxis.
• Sömlös verktygsintegration: Ta in externa verktyg och tjänster direkt i VS Code, såsom byggsystem, testramverk och molnplattformar, vilket skapar en enhetlig och integrerad utvecklingsmiljö.
• Bidrag till gemenskapen: Dela dina tillägg med den bredare JavaScript-gemenskapen, vilket gör det möjligt för andra utvecklare att dra nytta av ditt arbete och främjar samarbete och innovation.

Grunderna i utveckling av VS Code-tillägg

Innan vi dyker in i de tekniska detaljerna, låt oss gå igenom de grundläggande koncepten och verktygen som krävs för att utveckla VS Code-tillägg.

Förutsättningar

• Node.js och npm (eller yarn): Node.js tillhandahåller JavaScript-körtidsmiljön, och npm (Node Package Manager) eller yarn används för att hantera projektberoenden. Se till att du har de senaste versionerna installerade. Ladda ner från nodejs.org.
• VS Code: Självklart behöver du VS Code. Ladda ner från code.visualstudio.com.
• Yeoman och VS Code Extension Generator: Yeoman är ett "scaffolding"-verktyg som förenklar skapandet av nya projekt. VS Code Extension Generator tillhandahåller en förkonfigurerad mall för VS Code-tillägg. Installera dem globalt med npm:

              npm install -g yo generator-code
              
  
                
                  Copy
                
              
            

Tilläggsmanifest (package.json)

Filen package.json är hjärtat i ditt tillägg. Den definierar tilläggets metadata, beroenden och aktiveringshändelser. Viktiga egenskaper inkluderar:

• name: Den unika identifieraren för ditt tillägg.
• displayName: Det människoläsbara namnet som visas på VS Code-marknadsplatsen och i tilläggslistan.
• description: En kort beskrivning av tilläggets syfte.
• version: Tilläggets versionsnummer.
• publisher: Ditt utgivar-ID (krävs för publicering på VS Code-marknadsplatsen).
• engines.vscode: Den lägsta versionen av VS Code som krävs av tillägget.
• activationEvents: En array av händelser som utlöser aktiveringen av ditt tillägg. Vanliga händelser inkluderar onCommand:yourCommandId, onLanguage:languageId, och * (aktiveras vid start). Att använda specifika aktiveringshändelser är avgörande för prestandan.
• main: Sökvägen till den huvudsakliga JavaScript-filen som innehåller ditt tilläggs kod.
• contributes: Ett objekt som definierar tilläggets bidrag till VS Code, såsom kommandon, menyer, inställningar och vyer.
• dependencies: En lista över npm-paket som ditt tillägg är beroende av.
• devDependencies: En lista över npm-paket som krävs för utveckling, såsom testramverk och byggverktyg.

Exempel på ett package.json-kodavsnitt:

            {
  "name": "my-javascript-tools",
  "displayName": "My JavaScript Tools",
  "description": "A collection of useful JavaScript development tools.",
  "version": "0.0.1",
  "publisher": "my-publisher",
  "engines": {
    "vscode": "^1.70.0"
  },
  "activationEvents": [
    "onCommand:my-javascript-tools.formatCode",
    "onLanguage:javascript"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-javascript-tools.formatCode",
        "title": "Format JavaScript Code"
      }
    ]
  },
  "dependencies": {
    "prettier": "^2.7.0"
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "typescript": "^4.7.0"
  }
}
            

              
                Copy
              
            
          

Tilläggs-API

VS Code Extension API tillhandahåller en rik uppsättning gränssnitt och funktioner för att interagera med redigeraren, komma åt dess funktioner och manipulera dess beteende. Bekanta dig med de centrala API-koncepten, inklusive:

• vscode.commands: Registrera och exekvera kommandon.
• vscode.languages: Registrera språkfunktioner, såsom kodkomplettering, hovers och diagnostik.
• vscode.window: Interagera med redigerarfönstret, visa meddelanden och be om användarinput.
• vscode.workspace: Få tillgång till arbetsyterelaterad information, såsom filer, mappar och inställningar.
• vscode.debug: Utöka felsökningsmöjligheterna.
• vscode.scm: Integrera med versionshanteringssystem.

Aktiveringshändelser

Aktiveringshändelser är avgörande för att styra när ditt tillägg laddas och aktiveras. Att använda specifika aktiveringshändelser kan avsevärt förbättra VS Codes startprestanda. Vanliga aktiveringshändelser inkluderar:

• onCommand:<commandId>: Aktiveras när ett specifikt kommando exekveras.
• onLanguage:<languageId>: Aktiveras när en fil av ett specifikt språk öppnas.
• onFileSystem:<scheme>: Aktiveras när en fil med ett specifikt filsystemsschema öppnas (t.ex. file, git, ftp).
• onDebug: Aktiveras när felsökaren startas.
• onTest: Aktiveras när tester körs.
• onView:<viewId>: Aktiveras när en specifik vy är synlig i sidofältet.
• *: Aktiveras vid start (använd sparsamt eftersom det kan påverka prestandan).

Skapa ditt första VS Code-tillägg

Låt oss gå igenom processen för att skapa ett enkelt VS Code-tillägg som formaterar JavaScript-kod med hjälp av Prettier.

Skapa grundstrukturen för tillägget

1. Öppna en terminal och navigera till den katalog där du vill skapa ditt tillägg.
2. Kör VS Code Extension Generator:

               yo code
               
   
                 
                   Copy
                 
               
             

3. Svara på frågorna:
   • Välj New JavaScript Extension.
   • Ange tilläggets namn (t.ex. javascript-formatter).
   • Ange tilläggets identifierare (t.ex. javascript-formatter).
   • Ange en beskrivning (t.ex. Formaterar JavaScript-kod med Prettier.).
   • Välj om du vill aktivera TypeScript (för detta exempel använder vi JavaScript, men TypeScript rekommenderas starkt för större projekt).
   • Välj om du vill initiera ett Git-repository.

Installera Prettier

Installera Prettier som ett beroende för ditt tillägg:

            cd javascript-formatter
npm install prettier --save
            

              
                Copy
              
            
          

Implementera formateringslogiken

Öppna filen extension.js. Denna fil innehåller kärnlogiken för ditt tillägg. Ersätt den befintliga koden med följande:

            const vscode = require('vscode');
const prettier = require('prettier');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Congratulations, your extension "javascript-formatter" is now active!');

	let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showInformationMessage('No active text editor.');
			return;
		}

		const document = editor.document;
		const text = document.getText();

		try {
			const formattedText = prettier.format(text, {
				parser: 'babel',
				tabWidth: 2,
				semi: true,
				singleQuote: true,
				railingComma: 'es5',
				bracketSpacing: true,
				arrowParens: 'always',
				printWidth: 80
			});

			editor.edit(editBuilder => {
				editBuilder.replace(new vscode.Range(
					document.positionAt(0),
					document.positionAt(text.length)
				), formattedText);
			});
		} catch (error) {
			vscode.window.showErrorMessage(`Error formatting code: ${error.message}`);
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

            

              
                Copy
              
            
          

Uppdatera package.json

Modifiera filen package.json för att registrera kommandot och specificera aktiveringshändelsen. Lägg till följande i contributes-sektionen:

            "contributes": {
  "commands": [
    {
      "command": "javascript-formatter.formatCode",
      "title": "Format JavaScript Code"
    }
  ]
},
            

              
                Copy
              
            
          

Och uppdatera activationEvents-sektionen:

            "activationEvents": [
  "onCommand:javascript-formatter.formatCode",
  "onLanguage:javascript"
],
            

              
                Copy
              
            
          

Testa tillägget

1. Tryck på F5 för att starta tillägget i ett nytt VS Code-fönster (Extension Development Host).
2. Öppna en JavaScript-fil i Extension Development Host.
3. Tryck på Ctrl+Shift+P (eller Cmd+Shift+P på macOS) för att öppna kommandopaletten.
4. Skriv Format JavaScript Code och välj kommandot.
5. JavaScript-koden i den aktiva redigeraren bör nu formateras med Prettier.

Avancerade tekniker för utveckling av VS Code-tillägg

När du har bemästrat grunderna kan du utforska mer avancerade tekniker för att skapa sofistikerade och kraftfulla VS Code-tillägg.

Language Server Protocol (LSP)

Language Server Protocol (LSP) definierar ett standardiserat sätt för språkservrar att kommunicera med IDE:er. Genom att använda LSP kan du tillhandahålla avancerade språkfunktioner, såsom:

• Kodkomplettering (IntelliSense): Föreslå relevanta kodkompletteringar baserat på den aktuella kontexten.
• Gå till definition: Navigera till definitionen av en symbol.
• Hitta alla referenser: Hitta alla förekomster av en symbol i arbetsytan.
• Byt namn på symbol: Byt namn på en symbol och uppdatera alla referenser.
• Koddiagnostik (linting och felkontroll): Identifiera potentiella fel och ge förslag på förbättringar.

Bibliotek som vscode-languageserver förenklar utvecklingen av LSP-baserade tillägg.

Felsökningsstöd

VS Code tillhandahåller ett kraftfullt felsöknings-API som låter dig utöka dess felsökningsmöjligheter. Du kan:

• Skapa anpassade felsökningsadaptrar: Stöd för felsökning av anpassade språk eller körtidsmiljöer.
• Bidra med felsökningskonfigurationer: Tillhandahåll förkonfigurerade felsökningskonfigurationer för specifika projekttyper.
• Lägg till anpassade felsökningsvyer: Visa felsökningsinformation i anpassade vyer.

Arbeta med Webviews

Webviews låter dig bädda in webbaserade användargränssnitt i VS Code. Detta är användbart för att skapa komplexa konfigurationspaneler, interaktiva dokumentationsvisare eller visualiseringar. Du kan använda HTML, CSS och JavaScript för att bygga gränssnittet och kommunicera med tilläggets backend via meddelandehantering.

Inställningar och konfiguration

Låt användare anpassa ditt tilläggs beteende genom inställningar. Definiera inställningar i contributes.configuration-sektionen i filen package.json. Få tillgång till inställningar med hjälp av vscode.workspace.getConfiguration()-API:et.

Testa ditt tillägg

Att testa ditt tillägg noggrant är avgörande för att säkerställa dess kvalitet och tillförlitlighet. Använd testramverk som Mocha och Chai för att skriva enhetstester och integrationstester. VS Code har inbyggt stöd för att köra tester direkt i redigeraren.

Bästa praxis för utveckling av VS Code-tillägg

Att följa dessa bästa praxis hjälper dig att skapa högkvalitativa, underhållbara och användarvänliga VS Code-tillägg:

• Använd TypeScript: TypeScript erbjuder statisk typning, vilket hjälper till att fånga fel tidigt och förbättrar kodens underhållbarhet.
• Använd asynkron programmering: Undvik att blockera UI-tråden genom att använda asynkrona programmeringstekniker, såsom async/await.
• Hantera fel på ett elegant sätt: Implementera korrekt felhantering för att förhindra krascher och ge informativa felmeddelanden till användaren.
• Dokumentera din kod: Skriv tydlig och koncis dokumentation för att hjälpa andra utvecklare att förstå och använda ditt tillägg.
• Följ riktlinjerna för VS Code-tillägg: Följ riktlinjerna för VS Code-tillägg för att säkerställa att ditt tillägg beter sig väl och integreras sömlöst med redigeraren. Dessa riktlinjer täcker ämnen som prestanda, säkerhet och användarupplevelse.
• Använd semantisk versionering: Följ principerna för semantisk versionering (SemVer) när du släpper nya versioner av ditt tillägg.
• Håll ditt tillägg uppdaterat: Uppdatera regelbundet ditt tillägg för att inkludera nya funktioner, åtgärda buggar och hantera säkerhetsproblem.
• Internationalisering (i18n) och lokalisering (l10n): Tänk på VS Codes globala publik och designa ditt tillägg med i18n/l10n i åtanke. Detta innebär att externalisera strängar och tillhandahålla översättningar för olika språk.
• Tillgänglighet: Se till att ditt tillägg är tillgängligt för användare med funktionsnedsättningar. Följ riktlinjer för tillgänglighet när du designar ditt användargränssnitt och överväg att använda hjälpmedelsteknik för testning.

Publicera ditt tillägg

När du är nöjd med ditt tillägg kan du publicera det på VS Code Marketplace, vilket gör det tillgängligt för miljontals utvecklare världen över.

1. Skapa ett Azure DevOps-konto: Du behöver ett Azure DevOps-konto för att hantera dina tillägg.
2. Installera verktyget vsce: VS Code Extension Manager (vsce) är ett kommandoradsverktyg för att paketera och publicera tillägg.

               npm install -g vsce
               
   
                 
                   Copy
                 
               
             

3. Paketera ditt tillägg:

               vsce package
               
   
                 
                   Copy
                 
               
             

4. Publicera ditt tillägg:

               vsce publish
               
   
                 
                   Copy
                 
               
             

Följ instruktionerna på VS Code Marketplace-webbplatsen för mer detaljerad information om hur du publicerar ditt tillägg.

Verkliga exempel på JavaScript VS Code-tillägg

Här är några exempel på populära JavaScript VS Code-tillägg som visar kraften i verktygsintegration:

• ESLint: Integrerar ESLint-lintern i VS Code, vilket ger realtidsanalys av kod och markerar potentiella fel.
• Prettier: Formaterar automatiskt JavaScript-kod enligt en konsekvent stil.
• JavaScript (ES6) code snippets: Tillhandahåller en samling användbara kodavsnitt för JavaScript-utveckling.
• Debugger for Chrome: Låter dig felsöka JavaScript-kod som körs i Chrome direkt från VS Code.
• npm Intellisense: Autokompletterar npm-moduler i import-satser.

Dessa tillägg visar hur VS Code kan anpassas och utökas för att skapa en mer effektiv och produktiv utvecklingsmiljö.

Slutsats

Utveckling av VS Code-tillägg är ett kraftfullt sätt att förbättra ditt arbetsflöde för JavaScript-utveckling, integrera externa verktyg och bidra till den bredare JavaScript-gemenskapen. Genom att bemästra grunderna i Extension API, förstå avancerade tekniker och följa bästa praxis kan du skapa betydelsefulla tillägg som löser verkliga problem och förbättrar livet för utvecklare runt om i världen. Omfamna kraften i utbyggbarhet och lås upp den fulla potentialen hos VS Code!